<template>
	<view class="QS-Backtop" :class="getClass" :style="getStyle" >
		<!-- #ifdef APP-NVUE -->
		<view class="nvue-placeholder" ref="nvuePlaceholder"></view>
		<!-- #endif -->
		<view :class="getElClass" :style="getElStyle" ref="QS-Backtop-el" class="QS-Backtop-el" @tap="active">
			<image 
			v-if="type==='image'" 
			class="backtop-container" 
			:class="compClass.image"
			:style="compStyle.image"
			:src="image"
			mode="aspectFill"></image>
			<view
			v-else-if="type==='text'"
			class="backtop-container" 
			:class="compClass.textContainer"
			:style="compStyle.textContainer">
				<text>{{text}}</text>
			</view>
			<slot v-else-if="type==='slot'"></slot>
		</view>
	</view>
</template>

<script>
	import rpxUnit2px from '../../js/functions/rpxUnit2px.js';
	import QSComponentMixin from '../../mixins/QS-Components-Mixin.js';
	import getH5TabbarHeight from '../../js/functions/getH5TabbarHeight.js';
	import styleObj2String from '../../js/functions/styleObj2String.js';
	import classObj2String from '../../js/functions/classObj2String.js';
	let props;
	try{
		props = require('@/QS-UI-CONFIG/components/QS-BackTop/js/props.js');
	}catch(e){
		//TODO handle the exception
		props = {};
	}
	const QSComponentMixinRes = QSComponentMixin({ 
		componentType: 'QS-BackTop', 
		setContext: true,
		nodeName: '.QS-Backtop .QS-Backtop-el'
	});
	// #ifdef APP-NVUE
	const dom = weex.requireModule('dom');
	// #endif
	var _this;
	export default {
		mixins: [QSComponentMixinRes.mixin],
		// name: 'QS-Backtop',
		props: {
			// #ifdef MP-ALIPAY
			...QSComponentMixinRes.props,
			// #endif
			type: {
				type: String,
				default: 'image'
			},
			image: {
				type: String,
				default: ''
			},
			text: {
				type: String,
				default: ''
			},
			right: {
				type: String,
				default: '30rpx'
			},
			bottom: {
				type: String,
				default: '30rpx'
			},
			duration: {
				type: [String, Number],
				default: '.3s'
			},
			zIndex: {
				type: [String, Number],
				default: 990
			},
			backTopType: {
				type: String,
				default: 'page'
			},
			tabbar: {
				type: [String, Boolean],
				default: false
			},
			offsetBottom: {
				type: [String, Number],
				default: 0
			},
			...props
		},
		data() {
			return {
				showBl: false,
				tabbarHeight: 0
			}
		},
		created() {
			_this = this;
		},
		computed: {
			isTabbar() {
				return String(this.tabbar) === 'true';
			},
			getElClass() {
				return classObj2String(this.compClass.backTop);
			},
			getElStyle() {
				const style =  {
					right: this.right,
					bottom: this.getBottom,
					transitionDuration: this.duration,
					zIndex: this.zIndex,
					fontSize: this.baseFontSize + 'px'
				};
				if(this.showBl) {
					style.transform = `translateY(0)`
				}else{
					style.transform = `translateY(100%)`
				}
				return `${styleObj2String(style)};${styleObj2String(this.compStyle.backTop)}`;
			},
			getBottom() {
				// return 0;
				const pxValue = rpxUnit2px(this.bottom);
				let value = 0;
				if (this.showBl) {
					if (this.type === 'image' || this.type === 'text') {
						value = pxValue;
					}

					// #ifdef H5
					if (this.isTabbar) value += this.tabbarHeight;
					// #endif
					
					value += rpxUnit2px(this.offsetBottom);
				} else {
					if (this.type === 'image' || this.type === 'text') {
						value = 0 - pxValue;
					}

					// #ifdef H5
					if (this.isTabbar) value -= this.tabbarHeight;
					// #endif
					value -= rpxUnit2px(this.offsetBottom);
				}
				return value + 'px';
			}
		},
		methods: {
			
			setShow(bl) {
				if(this.isTabbar) this.tabbarHeight = getH5TabbarHeight();
				if (this.showBl !== bl) this.showBl = bl;
			},
			show() {
				this.setShow(true);
			},
			hide() {
				this.setShow(false);
			},
			active() {
				if (_this.backTopType === 'page') {
					// #ifndef APP-NVUE
					uni.pageScrollTo({
						scrollTop: 0,
						duration: 300
					})
					// #endif
					// #ifdef APP-NVUE
					dom.scrollToElement(this.$refs.nvuePlaceholder)
					// #endif
				} else {
					_this.$emit('backTop');
				}
			},
		}
	}
</script>

<style scoped>
	.QS-Backtop{
		
	}
	.QS-Backtop-el {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		position: fixed;
		transition-property: bottom,transform;
		/* #ifndef APP-NVUE */
		transform: translateY(100%);
		/* #endif */
		/* #ifdef APP-NVUE */
		transform: translateY(100%);
		/* #endif */
		
	}
	.backtop-container {
		height: 40px;
		width: 40px;
		border-radius: 50%;
		overflow: hidden;
	}
	
	.nvue-placeholder{
		/* position: fixed;
		top: 0;
		left: 0; */
		height: 0;
		width: 0;
		opacity: 0;
	}
</style>
